<style lang="less">
  @import '../styles/common.less';
  @import 'index.less';
  @import '../tables/components/table.less';
</style>

<template>
  <div class="address">
    <Row class="row">
      <Col span="6" class="list-div">
      <Card>
        <p slot="title">
          组织部门
        </p>
        <div class="tree-div">
          <Tree :data="TreeData" children-key="children"
                @on-select-change="onTree"></Tree>
        </div>
      </Card>
      </Col>
      <Col span="18" class="padding-left-10 list-div">
      <Card id="TableCard">
        <p slot="title">
          <Icon type="md-people" size="24"></Icon>
          用户列表
          <span v-if="depTitle!=''">（ {{depTitle}} ）</span>
        </p>
        <Row class="margin-top-10">
          <div class="table-head">
            <div class="left">
              <Input v-model="search_name" size="default" placeholder="姓名"/>
            </div>
            <div class="left-btn">
              <Button type="primary" @click="searchFun()">搜索</Button>
            </div>
            <Button type="primary" class="Button" @click="ExportData()">导出数据</Button>
          </div>
          <Table stripe border :columns="columns" :data="data" @on-row-click="onRowData" class="margin-top-10"
                 :height="TableHeight"></Table>
          <div style="margin: 10px;overflow: hidden;height: 36px;">
            <div style="float: right;">
              <Page :total="total" :current="page" @on-change="changePage" show-elevator></Page>
            </div>
          </div>
        </Row>
      </Card>
      </Col>

      <!--人员详情-->
      <user-info
        :user_id="userInfo_id"
        @userInfoBackFun="userInfoBackFun"
      ></user-info>
    </Row>
  </div>
</template>

<script>
  import Cookies from 'js-cookie';
  import Util from '../../libs/util';
  import util from '@/libs/util.js';
  import Utils from '../../libs/mod.utils';
  import String from '../../libs/mod.string';
  import Modal from '../../libs/mod.Modal';
  import userAvatar from '../components/user-avatar.vue';
  import userInfo from '../components/user-info.vue';
  export default {
    components: {
      userAvatar,
      userInfo
    },
    data () {
      return {
        TableHeight: 300,
        spanList: 18,
        showDetail: false,
        total: 0,
        page: 1,
        size: 10,
        id: '',
        showCurrentTableData: false,
        columns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            key: 'name',
            title: '姓名',
            width: 100,
          },
          {
            key: 'mobile',
            title: '电话',
          },
          {
            key: 'department_name',
            title: '部门',
          },
          {
            key: 'position',
            title: '职务',
            render: (h, params) => {
              var position = params.row.position || {};
              var position2 = params.row.position2 || {};
              var arr = [];
              if (position && position.title) {
                arr.push(position.title);
              }
              if (position2 && position2.title) {
                arr.push(position2.title);
              }
              var str = arr.join(' ， ');
              return h('div', [
                h('span', str)
              ]);
            }
          },
          {
            key: 'status',
            title: '在职状态',
            width: 100,
            render: (h, params) => {
              return h('div', [
                h('span', params.row.status.title)
              ]);
            }
          }
        ],
        data: [],
        dataDetail: {},
        TreeData: [],
        userDetail: {
          id: '',
          username: '',
          avatar: '',
          name: '',
          mobile: '',
        },
        dataArr: [],
        depTitle: '',
        search_name: '',
        userInfo_id: '',// 查看用户详情的用户id
      };
    },
    computed: {},
    mounted () {
      var _this = this;
      _this.getTreeData();
      _this.$nextTick(function () {
        var height = $('#TableCard').height();
        var TableHeight = height - 51 - 32 - 10 - 36 - 56 - 10;
        _this.TableHeight = TableHeight;
      });
    },
    methods: {
      // 搜索
      searchFun: function () {
        var _this = this;
        _this.selectionArr = [];
        _this.page = 1;
        if (_this.search_name != '') {
          _this.depTitle = '';
          _this.getData();

          var TreeDataArr = _this.TreeData;
          _this.dataArrFun(TreeDataArr);
          _this.TreeData = TreeDataArr;
        }
      },
      changePage (page) {
        var _this = this;
        _this.selectionArr = [];
        _this.page = page;
        _this.getData();
      },
      getTreeData: function () {
        var _this = this;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          //type: 'parent',
          //id: -1
        };
        var params = {
          url: '/department/list',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var data = res.data || [];

            var dataArr = data;
            _this.dataArrFun(dataArr);

            if (data.length > 0) {
              data[0].selected = true;
              var iid = data[0].id;
              var depTitle = data[0].name;
              _this.getData(iid);
              _this.depTitle = depTitle;
            }
            _this.TreeData = data;
          } else {
            _this.$Message.error('查询部门信息失败!');
          }
        }
      },
      dataArrFun: function (arr) {
        var _this = this;
        if (arr.length > 0) {
          for (var k in arr) {
            if (!arr[k]) {
              continue;
            }
            arr[k].title = arr[k].name;
            arr[k].expand = true;
            arr[k].selected = false;
            var dataArr = arr[k].children;
            _this.dataArrFun(dataArr);
          }
        }
      },
      onTree: function (data) {
        var _this = this;
        if (data.length > 0) {
          _this.search_name = '';// 清空搜索框
          var id = data[0].id;
          var title = data[0].title;
          _this.depTitle = title;
          _this.getData(id);
        }
      },
      getData: function (id) {
        var _this = this;
        _this.showDetail = false;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          did: id ? id : '',
          status: 2,
          page: _this.page,
          size: _this.size,
          name: _this.search_name,
        };
        var params = {
          url: '/user/list1',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var data = res.data || [];
            _this.total = res.rows || 0;
            _this.data = data;
          } else {
            _this.$Message.error('查询人员信息失败!');
          }
        }
      },
      onRowData: function (data, index) {
        var _this = this;
        var id = data.id;
        _this.userInfo_id = id;
      },
      userInfoBackFun: function (id) {
        var _this = this;
        _this.userInfo_id = id;
      },
      heid_userInfo: function () {
        var _this = this;
        _this.showDetail = false;
      },
      // 跳转到聊天页面
      toChatPage: function () {
        var _this = this;
        var name = _this.userDetail.name;
        var username = _this.userDetail.username;
        sessionStorage.setItem('sid2chat', 'p2p-' + username);
        util.openNewPage(_this, 'chats_index');
        _this.$router.push({
          name: 'chats_index'
        });
      },
      // 导出
      ExportData: function () {
        var _this = this;
        var fields = [
          {
            field: 'pname',
            title: '上级部门',
            type: 'varchar',
            order: 1,
          },
          {
            field: 'department_name',
            title: '所在部门',
            type: 'varchar',
            order: 2,
          },
          {
            field: 'uname',
            title: '姓名',
            type: 'varchar',
            order: 3,
          },
          {
            field: 'mobile',
            title: '电话',
            type: 'varchar',
            order: 4,
          },
          {
            field: 'sex',
            title: '性别',
            type: 'varchar',
            order: 5,
          },
          {
            field: 'status',
            title: '在职状态',
            type: 'varchar',
            order: 6,
          },
        ];
        var fieldsStr = Util.toStr(fields);
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          type: 'departmentUser',
          fields: fieldsStr,
        };
        var params = {
          url: '/file/db2excle',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var url = res.data;
            var date = Utils.dateToDateString(new Date());
            Utils.DownloadFile(url, '导出通讯录_' + date + '.xlsx');
          } else {
            _this.$Message.error('导出信息失败!');
          }
        }
      },

    }
  };
</script>

<style>

</style>
